<template>
	<div>
		<transition name="fade">
			<div
				v-show="show.downloadPanel"
				class="download-panel-container"
				:style="{ width: calcuWidth + 'px', top: y + 'px', left: x + 'px' }"
				@dragover="handleDragover"
			>
				<div>
					<div
						class="title-panel"
						:style="{ height: height + 'px', lineHeight: height + 'px' }"
						draggable="true"
						@dragstart="handleDragstart"
						@drag="handleDrag"
						@dragend="handleDragend"
					>
						<span>下载管理</span>
						<!-- <i class="el-icon-full-screen" style="cursor: pointer;" @click="handleShowMore"></i> -->
						<div class="unfold-container">
							<!-- <i class="el-icon-s-unfold" @click="handleUnfold"></i> -->
							<el-icon :size="20" @click="handleUnfold"><Memo /></el-icon>
						</div>
					</div>
					<el-tabs v-model="tabsConfig.active" stretch>
						<el-tab-pane label="生成中" name="general">
							<div class="general-list-container">
								<yd-table :formData="generalFormData" :tableConfig="generalTableConfig" :tableData="generalTableData.data"> </yd-table>
							</div>
						</el-tab-pane>
						<el-tab-pane label="已生成" name="download">
							<div class="download-list-container">
								<yd-table
									:formData="downloadFormData"
									:tableConfig="downloadTableConfig"
									:tableData="downloadTableData.data"
									@sortChangeHandler="renderList"
								>
								</yd-table>
							</div>
						</el-tab-pane>
					</el-tabs>
				</div>
			</div>
		</transition>

		<div v-show="show.foldPanel" class="fold-panel-container" @click="handleFold">
			<el-icon :size="20"><Download /></el-icon>
		</div>
	</div>
</template>

<script setup name="downloadpanel" lang="tsx">
import YdTable from '@/components/YdTable/index.vue';
import { downloadFromBlob, toDecimalFormate } from '@/utils/common';
import { queryDocumentExportApplications, downloadDoc, deleteDocs } from '@/api/bpm/download';
import { Download, Memo } from '@element-plus/icons-vue';
import { ref, reactive, onMounted, getCurrentInstance, computed, nextTick, onBeforeUnmount } from 'vue';

let instance = getCurrentInstance();
let proxy = instance?.proxy;

let x = ref(0);
let y = ref(0);
let width = ref(400);
let height = ref(40);
let innerWidth = ref(0);
let innerHeight = ref(0);
let show = reactive<anyObj>({
	downloadPanel: false,
	foldPanel: true,
});
let isMore = ref(false);
let tabsConfig = reactive<anyObj>({
	active: 'general',
});
let interval = reactive<anyObj>({
	// 轮询间隔，ms
	time: 3000,
	queryList: null,
});
let generalFormData = reactive<FormModelType>({});
let generalTableConfig = reactive<TableConfigType>({
	columns: [
		{
			label: '文件名',
			prop: 'exportFileName',
		},
		{
			label: '模块',
			prop: 'moduleName',
			hide: true,
		},
		// {
		//   label: "按钮",
		//   prop: "exportButtomName",
		//   hide: true
		// },
		{
			label: '状态',
			prop: 'docHandleState',
			width: 80,
			renderXss: (row: any, val: any) => {
				if (val === 0) {
					return <span>暂未处理</span>;
				} else if (val === 1) {
					return <span>处理中</span>;
				} else if (val === 2) {
					return <span style="color: #30B08F">处理成功</span>;
				} else if (val === 3) {
					return <span style="color: #C03639">处理异常</span>;
				} else if (val === 4) {
					return <span>排队中</span>;
				} else {
					return <span>未知状态</span>;
				}
			},
		},
		{
			label: '持续时间',
			prop: '',
			width: 120,
			renderXss: (row: any, val: any) => {
				let now = new Date().getTime();
				let submitTime = new Date(row.submitTime).getTime();
				let scap = toDecimalFormate(now - submitTime);
				return <span>{scap}</span>;
			},
		},
	],
	disableOrderNumber: true,
	pagination: {
		pageNum: 1,
	},
	loading: true,
});
let generalTableData = reactive({
	data: [],
});
let downloadFormData = reactive<FormModelType>({
	orderByColumn: 'docHandleEndTime',
	isAsc: 'desc',
});
let downloadTableConfig = reactive<TableConfigType>({
	columns: [
		{
			label: '文件名',
			prop: 'exportFileName',
		},
		{
			label: '生成时间',
			prop: 'docHandleEndTime',
			width: 100,
			sortable: true,
		},
		// {
		//   label: "模块",
		//   prop: "moduleName",
		//   hide: true
		// },
		{
			label: '按钮',
			prop: 'exportButtomName',
			hide: true,
		},
		{
			label: '操作',
			prop: '',
			width: 100,
			operation: [
				{
					text: '下载',
					handler: (scope) => handleDownload(scope.row),
				},
				{
					text: '删除',
					handler: (scope) => handleDelete(scope.row),
				},
			],
		},
	],
	disableOrderNumber: true,
	pagination: {
		pageNum: 1,
	},
	loading: true,
});
let downloadTableData = reactive({
	data: [],
});
let halfWidth = computed(() => {
	return width.value / 2;
});
let halfHeight = computed(() => {
	return height.value / 2;
});
let calcuWidth = computed(() => {
	if (isMore.value) {
		return 800;
	}
	return 400;
});
onMounted(() => {
	init();
	nextTick(() => {
		downloadTableConfig.loading = false;
		generalTableConfig.loading = false;
	});
});
onBeforeUnmount(() => {
	stopMonitor();
});

// 初始化
function init() {
	innerWidth.value = window.innerWidth;
	innerHeight.value = window.innerHeight;
	x.value = innerWidth.value - width.value - 20;
	y.value = innerHeight.value - 330;
}
// 开启轮询监听
function startMonitor() {
	interval.queryList = setInterval(() => {
		renderList();
	}, interval.time);
}
// 关闭轮询监听
function stopMonitor() {
	clearInterval(interval.queryList);
}
// 渲染列表
function renderList() {
	queryDocumentExportApplications({
		pageNum: -1,
		pageSize: -1,
		isAsc: downloadFormData.isAsc,
		orderByColumn: 'doc_handle_end_time',
	}).then((res: ApiResponse) => {
		let arr = res.data;
		console.log('a4r4r--', arr);
		let generalArr = arr.filter((r: anyObj) => r.docHandleState !== 2);
		let downloadArr = arr.filter((r: anyObj) => r.docHandleState === 2);
		generalTableData.data = generalArr;
		generalTableConfig.pagination!.total = generalArr.length;
		downloadTableData.data = downloadArr;
		downloadTableConfig.pagination!.total = downloadArr.length;
	});
}
// 拖拽移动面板开始隐藏ghost
function handleDragstart(e: anyObj) {
	e.dataTransfer.setDragImage(new Image(), -9999, -9999);
}
// 拖拽移动面板中更新位置
function handleDrag(e: any) {
	let x = e.clientX - halfWidth.value;
	let y = e.clientY - halfHeight.value;
	if (x < 0) {
		x = 0;
	} else {
		x = x;
	}
	if (y < 0) {
		y = 0;
	} else {
		y = y;
	}
}
// 拖拽移动面板结束更新位置
function handleDragend(e: any) {
	let x = e.clientX - halfWidth.value;
	let y = e.clientY - halfHeight.value;
	if (x < 0) {
		x = 0;
	} else {
		x = x;
	}
	if (y < 0) {
		y = 0;
	} else {
		y = y;
	}
}
// 拖拽移动面板阻止默认事件
function handleDragover(e: any) {
	e.preventDefault();
}
// 隐藏面板，关闭轮询监听
function handleUnfold() {
	stopMonitor();
	show.downloadPanel = false;
	show.foldPanel = true;
}
// 展开面板，开启轮询监听
function handleFold() {
	renderList();
	startMonitor();
	show.downloadPanel = true;
	show.foldPanel = false;
}
// 展示更多
function handleShowMore() {
	isMore.value = !isMore.value;
	generalTableConfig.columns.forEach((column) => {
		if (column.hide !== undefined && column.hide !== null) {
			column.hide = !isMore.value;
		}
	});
	downloadTableConfig.columns.forEach((column) => {
		if (column.hide !== undefined && column.hide !== null) {
			column.hide = !isMore.value;
		}
	});
}
// 下载
function handleDownload(row: any) {
	downloadDoc(row.exportFileName).then((res) => {
		downloadFromBlob(res, '', row.exportFileName).then((o) => {
			// if (!o.flag) {
			// 	proxy?.$message.warning(o.msg);
			// }
			console.log('o------', o);
			if (o.code === 0) {
				// proxy?.$message.success("下载成功");
			}
		});
	});
}
// 删除
function handleDelete(row: any) {
	deleteDocs({
		fileNames: [row.exportFileName],
		documentExportIds: [row.id],
	}).then((res) => {
		if (res.code != 200) {
			proxy?.$message.warning(res.msg);
			return;
		}
		proxy?.$message.success('删除成功');
		renderList();
	});
}
</script>

<style lang="scss">
:deep(.el-card > .el-card__body) {
	padding: 0 !important;
}
.panel-enter-active {
	animation: expand 0.5s;
}
.panel-leave-active {
	animation: expand 0.5s reverse;
}
@keyframes expand {
	0% {
		transform: scale(0);
	}
	10% {
		transform: scale(1.1);
	}
	20% {
		transform: scale(1.2);
	}
	30% {
		transform: scale(1.3);
	}
	40% {
		transform: scale(1.4);
	}
	50% {
		transform: scale(1.5);
	}
	60% {
		transform: scale(1.4);
	}
	70% {
		transform: scale(1.3);
	}
	80% {
		transform: scale(1.2);
	}
	90% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}

.download-panel-container {
	position: fixed;
	z-index: 2000;
	transition: width 0.3s;
	border: 0;
	background: linear-gradient(to right, rgba(28, 43, 93, 0.9), rgba(47, 126, 162, 0.9));
	color: #ffffff;
	.el-card__header {
		padding: 0 10px;
		min-height: unset;
		border: 0;
	}
	.el-card {
	}
	.el-tabs__active-bar {
		background-color: #2beded;
	}
	.el-tabs__item {
		font-size: 12px;
		color: #ffffff;
		height: 30px;
		line-height: 30px;
	}
	.el-tabs__item.is-active {
		color: #00ffff;
	}
	.el-tabs__header {
		margin: 0;
	}
	.el-table .el-table__header-wrapper th,
	.el-table .el-table__fixed-header-wrapper th {
		height: 40px;
		font-size: 12px;
	}
	.el-table--medium th,
	.el-table--medium td {
		padding: 4px 0;
	}
	.el-table {
		font-size: 12px;
	}
	.el-link {
		font-size: 12px;
	}
	.style-split-yd-table > :first-child {
		margin: 0 !important;
	}

	.title-panel {
		padding: 5px 10px 0 10px;
		cursor: move;
	}

	.unfold-container {
		float: right;
		cursor: pointer;
	}

	.general-list-container {
		height: 210px;
		font-size: 12px;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.download-list-container {
		height: 210px;
		font-size: 12px;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.empty-text {
		color: #c9c9c9;
		position: absolute;
		top: 40%;
		left: 44%;
		font-size: 14px;
		user-select: none;
	}
}

.fold-panel-container {
	position: fixed;
	bottom: 50%;
	right: 0;
	z-index: 9999;
	height: 50px;
	line-height: 50px;
	width: 16px;
	text-align: center;
	background-color: #19254d;
	border-radius: 8px;
	box-shadow: -2px 0px 5px #19254d;
	color: #2feded;
	cursor: pointer;
	transition: width 0.3s, border-radius 0.3s, font-size 0.3s;

	&:hover {
		width: 50px;
		border-radius: 50px;
		font-size: 20px;
	}
}
</style>
<style lang="scss" scoped>
.download-panel-container {
	/*滚动条*/
	::-webkit-scrollbar {
		width: 5px;
	}
	/*滚动条-轨道*/
	::-webkit-scrollbar-track {
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
		background-color: rgba(28, 43, 93, 0.81);
	}
	/*滚动条-滑块*/
	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.5);
		background-color: #05d1ff;
	}
}
</style>
